<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的朋友圈</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/css/app.css">
    <script src="/js/jquery/jquery.min.js" type="text/javascript"></script>

    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <style type="text/css">
        * {cursor: pointer;}
        .weui_mask_transition {
            display: none;
            position: fixed;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0);
            -webkit-transition: background .3s;
            transition: background .3s;
        }
        .weui_fade_toggle {
            background: rgba(0, 0, 0, 0.6);
        }
        .weui_actionsheet {
            position: fixed;
            left: 0;
            bottom: 0;
            -webkit-transform: translate(0, 100%);
            -ms-transform: translate(0, 100%);
            transform: translate(0, 100%);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 2;
            width: 100%;
            background-color: #EFEFF4;
            -webkit-transition: -webkit-transform .3s;
            transition: transform .3s;
        }
        .weui_actionsheet_toggle {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
        }
        .weui_actionsheet_menu {
            background-color: #FFFFFF;
        }
        .weui_actionsheet_cell:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        .weui_actionsheet_cell:first-child:before {
            display: none;
        }
        .weui_actionsheet_cell {
            position: relative;
            padding: 10px 0;
            text-align: center;
            font-size: 18px;
        }
        .weui_actionsheet_cell.title {
            color: #999;
        }
        .weui_actionsheet_action {
            margin-top: 6px;
            background-color: #FFFFFF;
        }
        .a5{
            font-size: 60px;
        }
        .a6{
            margin-top: 0px;
        }
        a:hover{
            color: red;
        }
        .ae86{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

    </style>
    <script>
        $(function () {
            $(".a6").renderValues(user);
            var id;
            $.get(baseUrl+"/users/"+user.id+"/friendDynamics",function (data) {
                $("#list").renderValues(data, {
                    'getHref': getHref,
                    getId:function (item,value) {
                        $(item).attr("data-id", value)
                    }
                })
                //
                $(".ct").click(function () {
                    changeClass($(this), "ae86", "")
                })

                //图片点击事件
                $(".post img").click(function () {
                    var src=$(this).attr('src');
                    $(document).dialog({
                        titleShow:false,
                        overlayClose:true,
                        content: '<img src="'+src+'" width="100%"/>'
                    });
                })
                //模态框关闭事件绑定
                $("#closeBtn").click(function () {
                    $("#commentModal").modal("hide");
                });
                //点击评论
                $("#comment").click(function () {
                    $("#commentForm")[0].reset();
                     id=$(this).data('id');
                    $("#commentModal").modal('show');
                })
                //发布评论
                $("#subBtn").click(function () {
                    $("#commentModal").modal("hide");
                    $.ajax({
                        url: baseUrl + "travelComments",
                        method: "post",
                        data: {
                            'travel.id': id,
                            content: $("#content").val()
                        },
                        success: function (data) {
                            if(data.success){
                               window.location.reload();
                            }else {
                                $(document).dialog({
                                    titleShow: false,
                                    content: "发布失败"+ data.errorMsg
                                });
                            }
                        }

                    })
                });

            })
        })
    </script>
</head>
<body>
<!--<div id="actionSheet_wrap">
    <div class="weui_mask_transition" id="mask" style="display: none;"></div>
    <div class="weui_actionsheet" id="weui_actionsheet">
        <div class="weui_actionsheet_menu">
            <div class="weui_actionsheet_cell title">选择下面👇进入你的朋友圈</div>
            <div class="weui_actionsheet_cell play_pyq" data-scene="1">男版朋友圈</div>
            <div class="weui_actionsheet_cell play_pyq" data-scene="2">女版朋友圈</div>
        </div>
        <div class="weui_actionsheet_action">
            <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
        </div>
    </div>
</div>-->

<!--<div style="margin:0 auto;display:none;">
    <img class="data-avt" src="images/0.jpg">
</div>-->
<div class="search-head">
    <div class="row nav-search">
        <div class="col-1">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-9">
            <div class="input-group-sm search">
               <span style="margin-left: 85px;">我的盆友圈</span>
            </div>
        </div>
        <div class="col-1">
            <a id="add" href="addFriendDynamics.html">
            <i  id="searchBtn" style="color:white;font-size:50px;position: absolute;top: 23%;left: 88%;height: 36px;margin-top:-28px;">+</i>
            </a>
        </div>
    </div>
</div>
<header class="a6">
    <img id="bg" render-src="coverImgUrl">
    <p id="user-name" class="data-name" render-html="nickName"></p>
    <img id="avt" class="data-avt" render-src="headImgUrl">
</header>
<div id="main">
    <div id="list">
        <ul render-loop="list">
            <li>
                <div class="po-avt-wrap">
                    <img class="po-avt data-avt" render-src="list.user.headImgUrl">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name"><span class="data-name" render-html="list.user.nickName"></span></p>
                        <div class="post">
                            <p render-html="list.dynamicsContent">大家好，听说国内冻成狗🐶？我这边还挺热～</p>
                            <p render-loop="list.imgsArr">
                                <img class="list-img" render-src="list.imgsArr.self" style="height: 80px;">
                            </p>
                        </div>
                        <p class="time" render-html="list.creatTime">2019-06-04 14:35:12</p>
                        <img id="comment" class="c-icon" render-fun="getId" render-key="list.id" src="/img/c.png">
                    </div>
                    <div class="r"></div>
                    <div class="cmt-wrap">
                        <div class="like"><img src="/img/l.png">苍井空，陈冠希，杨幂，王思聪，陈赫，刘德华，马云...</div>
                        <div class="cmt-list ae86" render-loop="list.comments">
                            <p><span render-html="list.comments.user.nickName"></span><span>:</span><span render-html="list.comments.content" class="ae86 ct"></span></p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <ul>
            <li>
                <div class="po-avt-wrap">
                    <img class="po-avt data-avt" src="/upload/7d437f8d-a476-465c-bd84-e93a03d8efd5.jpeg">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name"><span class="data-name">某某科技~贾素杰</span></p>
                        <div class="post">
                            <p>大家好，听说国内冻成狗🐶？我这边还挺热～</p>
                            <p>
                                <img class="list-img" src="/upload/8aa4b264-ed40-4227-a9d4-a3b0117b8a2f.jpeg" style="height: 80px;">
                                <img class="list-img" src="/upload/3c25abd5-8560-4aab-865a-eed3b6377f3a.jpeg" style="height: 80px;">
                                <img class="list-img data-avt" src="/upload/9ba9b051-9d7c-469e-b62e-1c64691bca57.jpeg" style="height: 80px;">
                            </p>
                        </div>
                        <p class="time">2019-06-04 14:35:12</p><img class="c-icon" src="/img/c.png">
                    </div>
                    <div class="r"></div>
                    <div class="cmt-wrap">
                        <div class="like"><img src="/img/l.png">苍井空，陈冠希，杨幂，王思聪，陈赫，刘德华，马云...</div>
                        <div class="cmt-list">
                            <p><span>wu世勋-EXO：</span>나는 서명～</p>
                            <p><span>鹿晗：</span>我们在国内冻成狗，我也想跟哥您去热热～</p>
                            <p><span>权志龙：</span>나는 서명～</p>
                            <p><span>王思聪：</span>去哪玩啊？那么爽</p>
                            <p>
                                <span class="data-name">某某科技~贾素杰</span>
                                回复
                                <span>
										王思聪
									</span>
                                <span>
										：
									</span>
                                澳洲大堡礁，这边刚好是夏季，挺适合避寒的。
                            </p>
                            <p><span>杨幂：</span>😘私人飞机出行，求带上我～</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<!--评论弹框-->
<div class="modal fade" id="commentModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <form id="commentForm">
                    <div class="form-group">
                        <label for="content" class="col-form-label">请吹牛:</label>
                        <input type="text" autofocus class="form-control" id="content">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="closeBtn">关闭</button>
                <button type="button" class="btn btn-primary" id="subBtn">确定</button>
            </div>
        </div>
    </div>
</div>

<script>
    function gotoplay(scene) {
        var gourl = "/act/pengYouQuan/my.php?sv=" + scene;
        location.href = gourl;
    }
    function safetostring(str) {
        return String(str).replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'");
    }

    //$("#list").html($("#scene").html());

    setTimeout(function () {
        // $(".data-name").text(safetostring(nickname));
        //$(".data-avt").attr("src", headimgurl);
        var cw = $('.list-img').width();
        $('.list-img').css({'height': cw + 'px'});
    }, 0);

    $(window).resize(function () {
        var cw = $('.list-img').width();
        $('.list-img').css({'height': cw + 'px'});
    });


    $(document.body).show();


    function hideActionSheet(weuiActionsheet, mask) {
        weuiActionsheet.removeClass('weui_actionsheet_toggle');
        mask.removeClass('weui_fade_toggle');
        weuiActionsheet.on('transitionend', function () {
            mask.hide();
        }).on('webkitTransitionEnd', function () {
            mask.hide();
        })
    }
    function showActionSheet() {
        var mask = $('#mask');
        var weuiActionsheet = $('#weui_actionsheet');
        weuiActionsheet.addClass('weui_actionsheet_toggle');
        mask.show().addClass('weui_fade_toggle').click(function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        $('#actionsheet_cancel').click(function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
    }
    $('#list').not(".noplayimg").on('click', function () {
        showActionSheet();
    });
    $('img').not(".noplayimg").on('click', function (e) {
        showActionSheet();
    });
    $('.play_pyq').on('click', function () {
        var scene = $(this).data("scene");
        gotoplay(scene);
    });
</script>


</body>
</html>